<template>
  <div class="main">
    <div class="background"></div>
    <River></River>
    <div class="aside">
      <hexian ref="popWin"></hexian>
      <wordcloud ref="popcloud"></wordcloud>
      <div class="jieshao">
        <p class="titlename">{{ str }}</p>
        <svg width="900" height="300"></svg>
        <p class="titletext">&nbsp;&nbsp;{{ text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Wordcloud from "@/components/wordcloud.vue";
import River from "@/components/river.vue";
import hexian from "@/components/hexian.vue";
export default {
  name: "poetry",
  data() {
    return {
      wordcloud: {},
      wordclouds: {},
      similary: [],
      similarity: {},
      data: {},
      str: "诗韵岁月——  东吴",
      text: "",
    };
  },
  components: { Wordcloud, River, hexian },
  methods: {
    drawText(value) {
      this.str = "诗韵岁月-" + value;
      this.text = this.data[value];
    },
    changesimilary(value) {
      this.similary = this.similarity[value];
      this.$refs.popWin.pop(this.similary);
    },
    changewordcloud(value) {
      this.wordcloud = this.wordclouds[value];
      this.$refs.popcloud.pop(this.wordcloud);
    },
  },
  mounted() {
    this.$axios.get("/introduction.json").then((res) => {
      this.data = res.data;
      this.drawText("东吴");
    });
    this.$axios.get("/dynasty_works_similarity.json").then((res) => {
      this.similarity = res.data;
      this.changesimilary("东吴");
    });

    this.$axios.get("/worldCloud.json").then((res) => {
      this.wordclouds = res.data;
      this.changewordcloud("东吴");
    });

    this.$bus.$on("changetext", (value) => {
      this.drawText(value);
    });

    this.$bus.$on("changes", (value) => {
      this.changesimilary(value);
    });

    this.$bus.$on("changew", (value) => {
      this.changewordcloud(value);
    });
  },
};
</script>

<style>
.background {
  width: 1510px;
  height: 750px;
  position: absolute;
  background-image: url("@/assets/背景图.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -2;
}

.main {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 600px;
  display: flex;
}

.river {
  flex: 1;
  position: relative;
  top: -30px;
  left: 220px;
}

.aside {
  flex: 3;
  display: flex;
  flex-flow: column;
  height: 700px;
  width: 700px;
}

#container {
  flex: 3;
  border: 1px solid blue;
}

.siderBar {
  flex: 2;
  position: relative;
  left: 370px;
}
.hexian {
  position: absolute;
  width: 270px;
  height: 270px;
  right: 520px;
  line-height: 50px;
  border-radius: 50%;
  background: -webkit-radial-gradient(
    circle closest-side,
    #fff 90%,
    rgba(211, 190, 113, 0.3) 10%
  );
  z-index: 1;
  top: 160px;
}
.jieshao {
  position: relative;
  flex: 1;
  left: 200px;
}
.area1 {
  position: relative;
  top: 0;
  left: 80px;
}
.titlename {
  position: relative;
  text-anchor: middle;
  top: 10px;
  left: 500px;
  dominant-baseline: middle;
  font-size: 20px;
  font-family: "华文行楷", "STXingkai", serif;
  /*writing-mode:vertical-rl*/
}
.titletext {
  position: relative;
  width: 500px;
  left: 350px;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  font-family: Lobster, cursive;
}
</style>
